<template>
  <el-table :data="tableData" style="width: 100%" stripe>
    <el-table-column label="联系人姓名" align="center">
      <template slot-scope="scope">
        <span style="margin-left: 10px">{{ scope.row.name }}</span>
      </template>
    </el-table-column>
    <el-table-column label="联系方式" align="center">
      <template slot-scope="scope">
        <span style="margin-left: 10px">{{ scope.row.phone }}</span>
      </template>
    </el-table-column>
    <el-table-column label="已定民宿" align="center">
      <template slot-scope="scope">
        <span style="margin-left: 10px">{{ scope.row.type }}</span>
      </template>
    </el-table-column>
    <el-table-column label="入住日期" align="center">
      <template slot-scope="scope">
        <span style="margin-left: 10px">{{ scope.row.date1  }}</span>
      </template>
    </el-table-column>
    <el-table-column label="退房日期" align="center">
      <template slot-scope="scope">
        <span style="margin-left: 10px">{{ scope.row.date2 }}</span>
      </template>
    </el-table-column>
    <!-- <el-table-column label="备注" align="center">
      <template slot-scope="scope">
        <span style="margin-left: 10px">{{ scope.row.notes }}</span>
      </template>
    </el-table-column> -->
    <el-table-column label="操作" align="center">
      <template slot-scope="scope">
        <el-button size="mini" @click="handleEdit(scope.$index, scope.row)"
          >编辑</el-button
        >
        <el-button
          size="mini"
          type="danger"
          @click="handleDelete(scope.$index, scope.row)"
          >删除</el-button
        >
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        {
          name: "王小虎",
          phone: "10086",
          type: "1",
          date1: "2016-05-02",
          date2: "2016-05-02",
          notes: "备注",
        },
        {
          name: "王小虎",
          phone: "10086",
          type: "1",
          date1: "2016-05-02",
          date2: "2016-05-02",
          notes: "备注",
        },{
          name: "王小虎",
          phone: "10086",
          type: "1",
          date1: "2016-05-02",
          date2: "2016-05-02",
          notes: "备注",
        },
        
      ],
    };
  },
  methods: {
    handleEdit(index, row) {
      console.log(index, row);

    },
    handleDelete(index, row) {
      console.log(index, row);
      // row.splice(index, 1);
    },
  },
};
</script>
